<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="notificationEnabled" label="发送通知">
      <Switch v-model:checked="formState.notificationEnabled" :checkedValue="true" :unCheckedValue="false" />
    </FormItem>
    <div v-if="formState.notificationEnabled === true">
      <FormItem name="smnUrns" label="通知对象">
        <Select v-model:value="formState.smnUrns" mode="multiple">
          <SelectOption v-for="option in smnUrnsOpetionList" v-bind:key="option.topicUrn" :value="option.topicUrn"
            >{{ option.displayName }}
          </SelectOption>
        </Select>
      </FormItem>

      <!--      <FormItem name="notificationBeginTime" label="起始时间" :rules="[{ required: true, message: '请选择起始时间' }]">-->
      <!--        <TimePicker v-model:value="formState.notificationBeginTime" format="HH:mm"></TimePicker>-->
      <!--      </FormItem>-->

      <!--      <FormItem name="notificationEndTime" label="终止时间" :rules="[{ required: true, message: '请选择终止时间' }]">-->
      <!--        <TimePicker-->
      <!--          v-model:value="formState.notificationEndTime"-->
      <!--          format="HH:mm"-->
      <!--          :disabledHours="disabledHours"-->
      <!--          :disabledMinutes="disabledMinutes"-->
      <!--        >-->
      <!--        </TimePicker>-->
      <!--      </FormItem>-->

      <FormItem name="notificationTime" label="起止时间" :rules="[{ required: true, message: '请输入起止时间' }]">
        <TimeRangePicker v-model:value="formState.notificationTime" format="HH:mm"></TimeRangePicker>
      </FormItem>

      <FormItem name="notificationTrigger" label="触发条件" :rules="[{ required: true, message: '必选' }]">
        <CheckboxGroup v-model:value="formState.notificationTrigger" :options="options"></CheckboxGroup>
      </FormItem>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, SelectOption, Select, CheckboxGroup, Switch, TimeRangePicker } from 'ant-design-vue';
import { ref, toRaw, watch } from 'vue';
import { selectTopicList } from '/@/api/maintenance-center/message-notification/messageNotification';
const options = [
  { label: '出现告警', value: 'alarmTrigger' },
  { label: '恢复正常', value: 'okTrigger' },
];

const emit = defineEmits(['submit']);

const formItemLayout = {
  labelCol: { span: 4 },
  labelWidth: 200,
  wrapperCol: { span: 16 },
};
const isEdit = ref(false);
const formState = ref<Record<string, any>>({});
const formRef = ref();
const smnUrnsOpetionList = ref();

watch(
  () => formState.value.notificationEnabled,
  async () => {
    if (formState.value.notificationEnabled === true) {
      if (isEdit.value === false) {
        formState.value.smnUrns = undefined;
        formState.value.notificationTime = undefined;
        formState.value.notificationTrigger = undefined;
      }
      smnUrnsOpetionList.value = await selectTopicList();
    } else {
      if (isEdit.value === false) {
        formState.value.smnUrns = undefined;
        formState.value.notificationTime = undefined;
        formState.value.notificationTrigger = undefined;
      }
    }
  }
);

function getFormValue() {
  return formState.value;
}

async function setFormValue(fieldValue: any) {
  isEdit.value = true;
  formState.value = await fieldValue;
}

function handleSubmit() {
  formRef.value.validate().then(() => {
    let params = toRaw(formState);
    emit('submit', params);
  });
}

defineExpose({ handleSubmit, getFormValue, setFormValue });
</script>
